<template>
	<div class="users-from-box">
		<div class="from-title">
			<transition appear enter-active-class='animated lightSpeedIn faster'>
				<p class="from-title-p">
					欢迎回来
				</p>
			</transition>
			
		</div>
		<div class="from-box">
			<div class="box-l">
				<p class="box-l-p">
					用户名
				</p>
			</div>
			<div class="box-r">
				<input class="from-username" type="text" placeholder="手机号/邮箱/昵称" v-model="user_name" />
			</div>
		</div>
		<div class="from-box">
			<div class="box-l">
				<p class="box-l-p">
					密码
				</p>
			</div>
			<div class="box-r">
				<input class="from-username" type="password" placeholder="密码" v-model="user_pass" />
			</div>
		</div>
		<div class="button-box">
			<button 
					class="login-button"
					:class='{ loginButtonActive: isActive }'
					@touchstart="loginTouchstart()" 
					@touchend="loginTouchend()"
					@click="login()"
			>
				登录
			</button>
		</div>
		<div class="login-grop">
			<p class="forget-pwd" @click="ForgetPwd">
				忘记密码
			</p>
			<router-link to='/register' tag='p' class="register">
				还没有账号？立即注册
			</router-link>
		</div>
		<div class="login-tip">
			<p v-show='show_err' v-text="error_tip"></p>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: 'users-form',
		data () {
			return {
				isActive: false,
				user_name: '',
				user_pass: '',
				show_err: false,
				error_tip: ''
			}
		},
		methods: {
			loginTouchstart () {
				this.isActive = true
			},
			loginTouchend (){
				this.isActive = false
			},
			login () {
				var _this = this
				if (_this.user_name == '' || _this.user_pass == '') {
					_this.show_err = true
					_this.error_tip = '请输入账号或密码'
					return 
				}
				axios({
					method: 'post',
					url: '/users/login',
					data: {
						'username': _this.user_name,
						'password': _this.user_pass
					}
				})
				.then( response=> {
					let res = response.data
					if (res.msg == '登录成功') {
 						_this.$router.push('/')
						localStorage.setItem('user_id', response.data.data[0].u_id)
 						localStorage.setItem('user_name', response.data.data[0].u_name)
						localStorage.setItem('user_avatar', response.data.data[0].u_avatar)
					}
					_this.show_err = true
					_this.error_tip = res.msg
				})
				.catch( error=> {
					console.log('ERROR:' + error)
				}) 
			},
			ForgetPwd () {
				this.show_err = true
				this.error_tip = '请联系管理员'
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~stylus/glo.styl'
	.users-from-box
		margin-top:30px
	.users-from-box input
		border:none
		outline:none
	.from-title
		padding:20px
		margin-bottom:34px
		.from-title-p
			color:#444
			font-size:58px
			letter-spacing:2px
			margin-left:12px
	.from-box
		background:#fff
		display:flex
		flex-direction:row
		.box-l
			width:34%
			height:100px
			display:flex
			align-items:center
			.box-l-p
				color:#444
				font-size:28px
				margin-left:34px
		.box-r
			width:66%
			height:100px
			display:flex
			align-items:center
			.from-username
				width:100%
				height:84px
				font-size:28px
			input::-webkit-input-placeholder
				color:#AEADAC
	.button-box
		padding:0 0 10px 0
		text-align:center
		.login-button
			font-size:32px
			color:#fff
			border:none
			padding:26px 320px
			margin-top:30px
			background:#4A90E2
			border-radius:8px
			outline:none
		.loginButtonActive
			background:#2275D7
	.login-grop
		height:30px
		margin-top:20px
		color:#AEADAC
		font-size:27px
		.forget-pwd
			display:inline-block
			margin-left:22px
			cursor:pointer
		.register
			display:inline-block
			float:right
			margin-right:22px
			cursor:pointer
	.login-tip
		padding:22px
		margin-top:12px
		font-size:26px
	.login-tip p
		color:red
</style>
